<template>
  <div style="margin-bottom: 20px;">
    <el-dialog :title="edit_main_title" append-to-body v-dialogDrag :visible.sync="edit_flag" :close-on-click-modal="false"
               width="500px"  @open="handleOpenConfig" :before-close="handleClose">
      <el-form label-width="120px" ref="objEditFrom" class="web_form_new" :rules="objEditRules" :model="objEditData" :disabled="editMakeDisabled">
        <el-form-item label="所属仓库：" prop="storeHouseName">
          <el-input v-model="houseName" disabled class="w184"></el-input>
        </el-form-item>
        <el-form-item label="所属库区：" prop="storeAreaId">
          <el-select v-model="objEditData.storeAreaId" placeholder="请选择库区类型">
            <el-option v-for="(item,index) in storeAreaList" :key="index" :label="item.name" :value="item.id" class="w184"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="库位编码：" prop="code">
          <el-input v-model="objEditData.code" class="w184" placeholder="请输入库区编码" :disabled="makeInputDisabled"></el-input>
        </el-form-item>
        <el-form-item label="库位名称：" prop="name">
          <el-input v-model="objEditData.name" class="w184" placeholder="请输入库区名称"></el-input>
        </el-form-item>
        <el-form-item label="库位类型：" prop="type">
          <el-select v-model="objEditData.type" class="w184" clearable filterable remote reserve-keyword placeholder="请选择库区类型">
            <el-option v-for="(item,index) in objEditWays.type" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态：" prop="status">
          <el-select v-model="objEditData.status" class="w184" clearable filterable remote reserve-keyword placeholder="请选择库位状态">
            <el-option v-for="(item,index) in objEditWays.status" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序：" prop="sort">
          <el-input v-model="objEditData.sort" class="w184"></el-input>
        </el-form-item>
        <el-form-item label="最大存储量：" prop="maxStorage">
          <el-input v-model="objEditData.maxStorage" class="w184"></el-input>
        </el-form-item>
        <el-form-item label="备注：" prop="remark">
          <!--<el-input v-model="objEditData.remark" class="w200"></el-input>-->
          <el-input type="textarea" :rows="4" style="width: 200px"
                    v-model="objEditData.remark"  placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item >
          <div class="bor">
            <span>说明：</span>
            <span>1.同一仓库、同一库区，库位不可重复</span>
            <span>2.最大存储量可自行设置，0~99999</span>
          </div>
        </el-form-item>
      </el-form>
      <!--按钮-->
      <el-row type="flex" justify="end">
        <!--<el-button type="primary" @click="handleClose">关闭</el-button>-->
        <el-button v-if="edit_main_title !== '查看'" type="primary" @click="confirmClick">提交</el-button>
      </el-row>
      <div style="height:20px"></div>
    </el-dialog>
  </div>
</template>

<script>
  import * as StoreAreaAPI from '@/api/house/storeArea'
  import * as StoreLocationAPI from '@/api/house/storeLocation'
  import * as Utils from '@/utils/index'
  export default {
    name: 'againShipToEdit',
    props: ['edit_flag', 'edit_main_title', 'edit_select_row', 'edit_params'],
    data() {
      return {
        houseName: null,
        objEditData: {
          id: null,
          storeHouseId: null,
          storeAreaId: null,
          code: null,
          name: null,
          type: null,
          sort: null,
          maxStorage: null,
          status: null,
          remark: null
        },
        objEditRules: {
          storeAreaId: [{ required: true, message: '所属库区不能为空', trigger: 'change' }],
          code: [{ required: true, message: '库位编码不能为空', trigger: 'change' }],
          name: [{ required: true, message: '库位名称不能为空', trigger: 'change' }],
          type: [{ required: true, message: '库位类型不能为空', trigger: 'change' }],
          status: [{ required: true, message: '库位状态不能为空', trigger: 'change' }]
        },
        objEditWays: {
          type: [
            { value: '10', label: '普通库位' },
            { value: '20', label: '临时库位' },
            { value: '30', label: '虚拟库位' },
            { value: '40', label: '大库位' },
            { value: '50', label: '中库位' }
          ],
          status: [
            { value: '10', label: '正常' },
            { value: '20', label: '失效' }
          ]
        },
        storeAreaList: [],
        storeAreaQuery: {
          current: 1,
          size: 999,
          total: 0,
          condition: {}
        },
        makeInputDisabled: false, // -input 禁用
        editMakeDisabled: false // 面板禁用
      }
    },
    methods: {
      getSelectListFunc() {
        // const that = this
        const queryParam = this.storeAreaQuery
        queryParam.condition.houseId = this.$store.getters.currentStorehouse.id
        queryParam.condition.status = '10'
        StoreAreaAPI.queryByPage(queryParam).then(result => {
          if (result.code === 0) {
            this.storeAreaList = result.data.records
          } else {
            this.$notify({
              title: '信息提示',
              message: result.message,
              type: 'error',
              duration: 2000
            })
          }
        })
      },
      // 选择 设置名称导出 $event,scope.row,'modelNo'
      selectCorp($event, value) {
        console.log('selectCorp(value)', $event, value)
        // const that = this
        if (value === 'driverName') {
          // that.fleetList.map(item => {
          //   if ($event === item.name) {
          //     that.objEditData.driverPhone = item.mobile
          //     that.objEditData.transportationId = item.plate
          //   }
          // })
        }
      },
      // 弹窗页打开初始
      handleOpenConfig(data) {
        const that = this
        console.log(that.$props.edit_main_title, 'that.$props', that.$props.edit_select_row, that.$props.edit_params)
        const { id, storeAreaId, code, name, type, sort, maxStorage, status, remark } = that.$props.edit_select_row
        const { houseName } = that.$props.edit_params
        that.houseName = houseName
        that.getSelectListFunc()
        // 重置
        that.editMakeDisabled = false
        that.makeInputDisabled = false
        that.objEditData = Utils.resetObjEditDataFunc(that.objEditData)
        that.objEditData.storeHouseId = that.$store.getters.currentStorehouse.id
        // 查看 新增 编辑
        if (that.$props.edit_main_title === '新增') {
          that.objEditData.type = '10'
          that.objEditData.status = '10'
        } else if (that.$props.edit_main_title === '编辑') {
          that.objEditData = { id, storeAreaId, code, name, type, sort, maxStorage, status, remark }
          that.editMakeDisabled = false
          that.makeInputDisabled = true
        } else if (that.$props.edit_main_title === '查看') {
          that.objEditData = { id, storeAreaId, code, name, type, sort, maxStorage, status, remark }
          that.editMakeDisabled = true
        }
      },
      confirmClick() {
        const that = this
        that.$refs['objEditFrom'].validate((valid) => {
          if (valid) {
            let apiName = ''
            let msgVal = ''
            if (that.$props.edit_main_title === '新增') {
              apiName = 'addStoreLocation'
              msgVal = '新增'
            } else if (that.$props.edit_main_title === '编辑') {
              apiName = 'updateStoreLocation'
              msgVal = '编辑'
            }
            StoreLocationAPI[apiName](that.objEditData).then(result => {
              if (result.code === 0) {
                that.$message({
                  message: msgVal + '成功',
                  type: 'success',
                  duration: 2000
                })
                that.$emit('edit-confirm', false)
              }
            }).catch(err => {
              console.log('error', err)
            })
          }
        })
      },
      handleClose() {
        this.$emit('edit-close', false)
      }
    }
  }
</script>
<style type="text/scss" lang="scss" scoped>
  /*web_form*/
  .web_form_new{
    display: flex;
    justify-content: left;
    align-items: center;
    flex-wrap: wrap;
  }
  .bor{
    border:1px dashed gray;
    width:300px;
    padding: 10px;
    span {
      display:block;
      color:forestgreen;
      line-height: 18px;
    }
  }
</style>
